<template>
  <div class="costRevenue clearfix">
       <div class="logoBg"><img src="~@/assets/images/common/fiveG.png"></div>
       <div class="heading">收入分析：<span class="redTitle">核心平台收入{{accMonth}}环比情况——从费用使用构成维度看{{areaLvl}}</span></div>
       <div class="content">
         <div class="tableBox">
         <el-table
           border
           stripe
           style="width: 100%"
           class="tableTh28"
           ref="table"
           :data="tableData"
           :span-method="arraySpanMethod"
         >
           <el-table-column fixed :label="accMonth+'收入环比（万元）'" prop="class2" class-name="first-title" min-width="30"></el-table-column>
           <el-table-column fixed  :label="accMonth+'收入环比（万元）'" prop="class1" class-name="second-title" min-width="70"></el-table-column>
           <el-table-column fixed  :label="accMonth+'收入环比（万元）'" prop="indexName" class-name="third-title" min-width="80"></el-table-column>
           <el-table-column v-for="(item,index) in colList" :prop="'data'+index" :label="item" :key="index" min-width="40">
           <template slot-scope="scope">
                     <span v-if="scope.row['data'+index]>0"  style="color:#5585bf">{{scope.row['data'+index]}}</span>
                    <span v-else style="color: #c00000">{{scope.row['data'+index]}}</span>
             </template>
           </el-table-column>
         </el-table>
         </div>
       </div>
  </div>
</template>

<script>
import businessIncome from "@/views/budget/showPdf/showEchart/businessIncome";
import itcIncome from "@/views/budget/showPdf/showEchart/itcIncome";
import { $budgetAPI } from "@/api";
import { getSessionStorage } from "@/common/js/storage";
import {getCookie} from "@/common/js/cookie"
import { mergeTableRow, mergeSpan } from "@/utils/mixin";
    export default {
        name: "costRevenue",
        components:{
          businessIncome,
          itcIncome,
        },
      props: ["areaId", "month"],
       data(){
         return{
             tableData:[],
             accMonth:'',
             colList:[],
             rightDecreaseData:{},
             rightIncreaseData:{},
             rightDecreaseIndexName:{},
             rightDecreaseAmount:{},
             decreaseAmount:'',
             increaseAmount:'',
             areaLvl:'',
         }
       },
       methods:{
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
           if (columnIndex == 0 || columnIndex == 1  || columnIndex == 2 ) {
               return this.spanArr[rowIndex][columnIndex];
               }
          },
         getTrendDataByArea(){
           var that = this
           $budgetAPI.getTrendDataByArea(
           {areaId:this.areaId,
            accMonth:this.month},
           res => {
             if(res && res.code == 0 ){
               if(res.content.area.areaLvl==2){
                that.areaLvl = '(分公司)'
               }else if(res.content.area.areaLvl==3){
                 that.areaLvl = '(县分)'
               }
               else if(res.content.area.areaLvl==4){
                 that.areaLvl = '(支局)'
               }else{
                 that.areaLvl = ''
               }
               that.colList = res.content.tableData.colList;
                 that.accMonth = res.content.accMonth.slice(4)+'月份';
               that.tableData = res.content.tableData.data;
               res.content.tableData.data.map((item,index) =>{
                     for(let i=0;i<item.dataList.length;i++){
                       item['data'+i] = item.dataList[i]
                     }
               })
               that.spanArr = mergeSpan(that.tableData, [
                "class2",
                "class1",
                "indexName"
              ]);
         }else {
              this.alertError(res);
            }
            setTimeout(()=>{
              this.$refs.table.doLayout();
            },500);
           },
            err => {}
            )
         },

       },
    }
</script>

<style  lang="scss" scoped>
.costRevenue{
   padding: 20px;
   border:1px solid #dee5f3;
   border-radius:5px;
   margin-top: 20px;
   position:relative;
   .costRevenue.clearfix:after,.costRevenue.clearfix:before{
     content: "";
     display: table;
   }
   .costRevenue.clearfix:after{
     clear: both;
   }
   .costRevenue.clearfix{
     *zoom: 1;
   }
   .logoBg{
     position: absolute;
     right:20px;
     top:20px;
   }
   .heading{
     font-size: 22px;
     font-weight: 700;
     text-align: center;
     padding-bottom: 40px;
     .redTitle{
       color:#c00000
     }
   }
   .content{
     .tableBox{
       margin-right: 10px;
       border-top: 1px solid #9abcf1;
       border-left: 1px solid #bfbfbf;
       border-right: 1px solid #bfbfbf;
       border-bottom: 1px solid #bfbfbf;
       /deep/ .el-table.tableTh28 {
        .cell{
          padding: 0 !important;
          transform:scale(0.9);
          // line-height: normal !important;
        }
          th {
            font-size: 12px;
            height: 23px;
            padding: 0;
            .cell{
              line-height: 20px;
              height: 20px;
            }
          }

         /deep/ tr.el-table__row td {
            font-size: 12px;
            padding: 0 !important;

          }
        }
        /deep/ .tableTh28 .el-table__header{
        .first-title.is-leaf {
             position: relative;
             border-right: 1px solid #d7e5fb !important;
             .cell {
              color: #d7e5fb;
             }
         }

         .second-title.is-leaf {
          position: relative;
          border-right: 1px solid #d7e5fb !important;
          .cell {
              color: #d7e5fb;
           }
         }
         .third-title.is-leaf {
           overflow: visible;
           .cell {
             width: 300%;
             left: -150%;
           }
         }
       }
      /deep/ .el-table tr:last-child td {
          color: #333;
          text-align: center;
          border-bottom: 1px solid transparent !important;
          border-right: 1px solid #bfbfbf !important;
      }
     }
   }
   }
</style>
